<template>
   


  <el-container>
    <el-container>
      <el-aside>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                 :collapse="isCollapse" @select="handleSelect">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">信用卡管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <el-col :span="3" @click.native="menuChange('defaultIndex')">
                  <div class="grid-content bg-purple">首页</div>
                </el-col>
              </el-menu-item>
              <el-menu-item index="1-1">
                <el-col :span="3" @click.native="menuChange('cardlistTotal')">额度管理</el-col>
              </el-menu-item>
              <el-menu-item index="1-1">
                <el-col :span="3" @click.native="menuChange('card')">信用卡</el-col>
              </el-menu-item>
              <el-menu-item index="1-2">
                <el-col :span="3" @click.native="menuChange('cardlist')">列表</el-col>
              </el-menu-item>

            </el-menu-item-group>
          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">支出管理</span>
            </template>
            <el-menu-item-group>


              <el-menu-item index="2-1">
                <el-col :span="3" @click.native="menuChange('cashOut')">添加支出记录</el-col>
              </el-menu-item>
              <el-menu-item index="2-1">
                <el-col :span="3" @click.native="menuChange('cashOutList')">支出列表</el-col>
              </el-menu-item>


            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">字典管理</span>
            </template>
            <el-menu-item-group>


              <el-menu-item index="3-1">
                <el-col :span="3" @click.native="menuChange('addDec')">添加字典</el-col>
              </el-menu-item>
              <el-menu-item index="3-2">
                <el-col :span="3" @click.native="menuChange('decList')">字典列表</el-col>
              </el-menu-item>

            </el-menu-item-group>
          </el-submenu>


        </el-menu>

      </el-aside>
      <el-main>
        <div :is="currentView"></div>
      </el-main>
      <el-aside width="200px">Aside</el-aside>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>


</template>

<script>
  import card from '@/components/card/card'
  import cardlist from '@/components/card/cardlist'
  import cardlistTotal from '@/components/card/cardlistTotal'
  import defaultIndex from '@/components/defaultIndex'
  import cashOut from '@/components/cashOut/cashOut'
  import cashOutList from '@/components/cashOut/cashOutList'
  import addDec from '@/components/dec/addDec'
  import decList from '@/components/dec/decList'

  export default {
    name: 'index',
    components: {
      card,
      cardlist,
      defaultIndex,
      cashOut,
      cashOutList,
      addDec,
      decList,
      cardlistTotal,
    },
    data() {
      return {
        currentView: 'defaultIndex',
        isCollapse: false,
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      menuChange(menu) {
        this.currentView = menu;
        console.log(this.currentView);
      }
    }
  }
</script>
